import './index.less'
import LiveDataCard from '@/components/card/liveDataCard'
import BigScreenModal from '@/components/modal/bigScreenShow'
import LiveDataShowScreen from '@/components/others/liveShowDataScreen'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnNormalP} from '@/components/text'
import useDeviceHook from '@/hooks/device'
import useModal from '@/hooks/modalHook'

const LiveDataShow = defineComponent({
  setup(props, ctx) {
    const {simpleDevList, updateSimpleDevList} = useDeviceHook()

    const {visible, openModal, closeModal} = useModal()
    const {
      visible: liveDataShowScreenVisible,
      openModal: liveDataShowScreenVisibleOpen,
      closeModal: liveDataShowScreenVisibleClose
    } = useModal()

    const state = reactive<{crrentDevs: SimpleDeviceData[]; currentShowType: 1 | 2}>({
      crrentDevs: [],
      currentShowType: 1
    })

    function handleOkClick(data: {devIdList: number[]; showType: 1 | 2}) {
      const crrentDevs = data.devIdList.map(devId => {
        return simpleDevList.value.find(dev => dev.devId === devId) as SimpleDeviceData
      })
      state.crrentDevs = crrentDevs
      state.currentShowType = data.showType

      closeModal()
      liveDataShowScreenVisibleOpen()
    }

    onMounted(() => {
      updateSimpleDevList({updateList: true})
    })

    return () => (
      <div class='pb-24 liveDataShow'>
        <CnBoldP class='mt-11 text-20'>实时数据</CnBoldP>

        <CnNormalP class='mt-6 mb-20 text-4xText'>
          展示设备所监测到的实时数据指标。并支持在点击大屏展示后，全屏展示所有设备的实时数据。
        </CnNormalP>

        <ProductFilesItem></ProductFilesItem>

        <div class='grid grid-cols-2 gap-x-20 gap-y-20'>
          {simpleDevList.value && simpleDevList.value.length
            ? simpleDevList.value.map(dev => (
                <LiveDataCard devId={dev.devId} onBigScreenShow={openModal}></LiveDataCard>
              ))
            : null}
        </div>

        <BigScreenModal
          visible={visible.value}
          onCancel={closeModal}
          onOk={handleOkClick}
        ></BigScreenModal>

        <LiveDataShowScreen
          visible={liveDataShowScreenVisible.value}
          devs={state.crrentDevs}
          showType={state.currentShowType}
          onClose={liveDataShowScreenVisibleClose}
        ></LiveDataShowScreen>
      </div>
    )
  }
})

export default LiveDataShow
